<template>
  <div>
     <div 
        class="masking-box mar-t60 h-403 padlr320 pad-t30"
        :style="{
            background: `url(${getAssetsImages('masking-bg')}) no-repeat`, 
            'background-size': '100% 100%'
        }"
        v-if="processList.length"
    >
        <div class="masking-tit ">服务流程</div>
        <div class="masking-process pad-t23 flex ju-ar flex-wrap">
            <div 
                class="process-li padlr30 flex-col flex-a "
                v-for="(item, index) in processList"
                :key="index"
                :class="{'mar-t100': index + 1 > Math.floor(tieValue(processList))}"
                :style="{width: `${100 / tieValue(processList)}%`}"
            >
                <div class="li-name">{{ item.title }}</div>
                <div class="li-tips mar-t6 w-180">{{ item.content }}</div>
            </div>
            <div class="masking-sort padlr80  flex ju-bt">
                <div 
                    class="sort-li"
                    v-for="(item, index) in processList.length"
                    :key="index"
                >
                    <div>{{ zeroFill(item) }}</div>
                </div>
                <div class="row-line"></div>
            </div>
        </div>
        
    </div>
  </div>
</template>

<script setup>
/**
 * 服务流程组件
*/
import { ref, defineProps } from "vue"
import serviceApi from "@/api/modules/trademarkService.js"
const props = defineProps({
    service_id: {
        type: String,
        default: ""
    },
    parentType: {
        type: String,
        default: "child"
    }
})

let processList = ref([])
// 服务流程
const getServiceProcess = () => { 
  serviceApi.serviceProcess({
    // service_type_id: props.service_id,
    service_id: props.service_id
  }).then(res => { 
    processList.value = res.data
  })
}
const getTypeServiceProcess = () => { 
  serviceApi.typeServiceProcess({
    service_type_id: props.service_id,
  }).then(res => { 
    processList.value = res.data
  })
}

if (props.parentType == "tos") {
  getTypeServiceProcess();
} else { 
  getServiceProcess();
}
const tieValue = arr => {
    let newArr = [];
    arr.map((item, index) => {
        newArr.push(index + 1)
    })
    let num = 0;
    newArr.map(item => {
        return num += item
    })
    return  num / arr.length
}

const zeroFill = num => { 
    return num < 10 ? `0${num}` : num
}
const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.masking-box {
    .masking-tit {
        font-size: 28px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: center;
        color: #202020;
    }
    
    .masking-process {
        position: relative;
        .process-li {
            width: 20%;
            text-align: center;
            .li-name {
                font-size: 16px;
                font-family: PingFang SC, PingFang SC-Semibold;
                font-weight: Semibold;
                text-align: center;
                color: #181818;
            }
            .li-tips {
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: Regular;
                text-align: center;
                color: #5e5f60;
            }
        }
        .masking-sort {
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        .row-line {
            position: absolute;
            height: 1px;
            background: #d3d8e3;
            width: 80%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .sort-li {
            position: relative;
            z-index: 99;
            width: 56px;
            height: 56px;
            background: linear-gradient(180deg,#f0f3f7, #ffffff);
            border: 2px solid #ffffff;
            border-radius: 50%;
            box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08);
            font-size: 24px;
            font-family: San Francisco Display, San Francisco Display-Bold;
            font-weight: Bold;
            text-align: center;
            color: #0052d9;
            line-height: 56px;
            letter-spacing: 1.33px;

        }
    }
    }
}
</style>